<template>
    <el-card class="box-card" >
        <div slot="header" class="clearfix">
            <span>博客设置</span>
        </div>
        <el-row>
            <span class="text">博客标题</span>
        </el-row>
        <div style="margin: 8px 0;"></div>
        <el-row>
            <el-input
                    type="text"
                    placeholder="新博客标题"
                    v-model="title"
                    maxlength="10"
                    show-word-limit
            >
            </el-input>
        </el-row>
        <div style="margin: 15px 0;"></div>
        <el-row>
            <span class="text">博客描述</span>
        </el-row>
        <div style="margin: 8px 0;"></div>
        <el-row>
            <el-input
                    type="textarea"
                    placeholder="新博客描述"
                    v-model="description"
                    maxlength="30"
                    show-word-limit
            >
            </el-input>
        </el-row>
        <div style="margin: 15px 0;"></div>
        <el-row>
            <span class="text">博客权限</span>
        </el-row>
        <div style="margin: 8px 0;"></div>
        <el-row>
            <el-select v-model="value" placeholder="请选择"
                       @change="selectTrigger(value)">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-row>
        <div style="margin: 20px 0;"></div>
        <el-row type="flex" justify="center">
            <el-col :span="10">
                <el-button type="primary" size="mini" @click="confirm" round>确定</el-button>
            </el-col>
            <el-col :span="10">
                <el-button size="mini" @click="cancel" round>取消</el-button>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
    export default {
        name: "blogSetting",
        data() {
            return {
                title: '',
                description: '',
                options: [{
                    value: '选项1',
                    label: '公开'
                }, {
                    value: '选项2',
                    label: '私有'
                }],
                value: '私有',
                blogId: '',
                blog: [],
                getData: false,
            }
        },
        methods: {
            selectTrigger(val) {
                if (val === "选项1") {
                    this.prompt();
                }
            },
            prompt() {
                this.$confirm('此操作将博客设置为公开, 是否继续?', '权限设置', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '设置成功!'
                    });
                    this.goPublic();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消设置'
                    });
                });
            },
            goPublic() {

            },
            confirm() {

            },
            cancel() {
                this.title = "";
                this.description = "";
            }
        }
    }
</script>

<style scoped>
    .box-card {
        margin-top: 20px;
        width: 250px;
        height: 400px;
    }

    .text {
        font-size: 14px;
    }

    .clearfix {
        font-size: 14px;
        color: rgba(65, 94, 134, 0.76);
        text-align: center;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>